<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="text" name="text" id="username" placeholder="请输入用户名"><br />
	<span id="usernamecontent"></span><br />
	<input type="email" name="email" id="useremail" placeholder="请输入邮箱">
	<span id="useremailcontent"></span><br />
</body>
<script>
	var username = document.getElementById("username");
	var usernamecontent = document.getElementById("usernamecontent");
	username.onfocus = function(){
		usernamecontent.innerHTML = "请输入中文的用户名";
	}
	username.onblur = function(){
		var regex = /^[\u4e00-\u9fa5]{0,}$/ ;
		if(regex.test(username.value)){
			usernamecontent.innerHTML = "格式正确";
		}else{
			usernamecontent.innerHTML = "格式不正确";
			usernamecontent.style.color = "red";
		}
	}
	var useremail = document.getElementById("useremail");
	var useremailcontent = document.getElementById("useremailcontent");
	useremail.onfocus = function(){
		useremailcontent.innerHTML = "请输入正确的邮件地址";
	}
	useremail.onblur = function(){
		var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ ;
		if(regex.test(useremail.value)){
			useremailcontent.innerHTML = "格式正确";
		}else{
			useremailcontent.innerHTML = "格式不正确";
			useremailcontent.style.color = "red";
		}
	}
</script>
</html>